<template>
  <div class="flex justify-between items-center mt-8 pt-6 border-t border-gray-100">
    <div class="flex gap-3">
      <button 
        class="px-5 py-2.5 border-2 border-gray-200 bg-white rounded-lg font-medium hover:border-indigo-500 hover:text-indigo-500 transition-all duration-300"
        @click="$emit('preview')"
      >
        {{ showPreview ? '隐藏预览' : '预览内容' }}
      </button>
    </div>
    
    <div class="flex gap-3">
      <button 
        class="px-6 py-2.5 border-2 border-gray-200 bg-white rounded-lg font-semibold hover:border-red-500 hover:text-red-500 transition-all duration-300"
        @click="$emit('cancel')"
      >
        取消
      </button>
      <button 
        class="px-6 py-2.5 bg-indigo-500 text-white rounded-lg font-semibold hover:bg-indigo-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300"
        :disabled="!canSubmit || submitting"
        @click="$emit('submit')"
      >
        {{ submitting ? submittingText : submitText }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  canSubmit: boolean
  submitting: boolean
  showPreview: boolean
  submitText: string
  submittingText: string
}

interface Emits {
  (e: 'preview'): void
  (e: 'cancel'): void
  (e: 'submit'): void
}

defineProps<Props>()
defineEmits<Emits>()
</script>
